<template>
  <div class="comment">
    <van-field
      class="toke"
      v-model="msg"
      rows="2"
      autosize
      label="评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入评论内容"
      show-word-limit
    />
    <van-button
      @click="sendcomment"
      block
      type="primary"
      size="large"
    >提交</van-button>
    <!-- 显示的评论区域 -->
    <div class="comList">
      <van-card
        v-for="(el,index) in comment"
        :key="index"
      >
        <template #thumb>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <div class="text">{{el.user_name}}</div>
        </template>
        <template #title>
          <van-rate
            v-model="el.rate"
            readonly
          />
        </template>
        <template #price>
          <div>{{el.add_time}}</div>
        </template>
        <template #desc>
          <div class="van-ellipsis ">{{el.content}}</div>
        </template>
      </van-card>
    </div>
    <van-button
      type="info"
      @click='getmore'
      block
      :disabled="flag"
    >{{deter()}}</van-button>
  </div>
</template>
<script>
import moment from 'moment'
import { getcomment, sendcomment } from '@/api/home.js'
export default {
  props: ['id'],
  data: () => ({
    msg: '',
    num: 1,
    comment: [],
    pageindex: 0,
    limit: 100,
    flag: false
  }),
  created() {
    this.getcomment()
  },
  methods: {
    async getcomment() {
      ++this.pageindex
      const res = await getcomment({ id: this.id, pageindex: this.pageindex, limit: this.limit })
      this.comment = this.comment.concat(res.data.message)
      //添加后认添加的信息拼接起来显示出来
      this.flag = this.pageindex * this.limit >= res.data.count//用于加载更多内容的后端逻辑
      //当前页数*当前页面显示的条数>后端提供的总数
    },
    async sendcomment() {
      await sendcomment({ id: this.id, content: this.msg })
      this.comment.unshift({
        user_name: '谢波',
        add_time: moment().format('YYYY-MM-DD-HH-MM-SS'),
        content: this.msg,
        rate: this.num
      })
    },
    getmore() {
      this.getcomment()//按钮事件触发一次,当前页面的页数对应的++this.package 自动加1;实现加载功能
    },
    deter() {
      return this.flag ? '暂无数据' : '加载更多'
    }
  }
}
</script>
<style lang="less" >
.comment {
  .toke {
    border: 1px solid lightgray;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .comList {
    margin-top: 10px;
  }
  .van-icon {
    display: flex;
    justify-content: center;
  }
  .van-icon__image {
    font-size: 30px;
    margin-top: 22px;
  }
  .text {
    text-align: center;
    font-family: "楷体";
    margin-top: 5px;
    font-size: 16px;
  }
  .van-ellipsis {
    position: relative;
    bottom: -10px;
    font-family: "楷体";
  }
}
</style>